<template>
  <div class="Inventory2">
    <div class="flexC">
      <div class="flex JustifyContentC AlignItemsC" style="padding: 2.5rem 0rem;"><p class="colorF textC Bold font_s30" style="font-weight: bold;">基金会清单信息</p></div>
      <div class="flexC" style="padding:0rem 4.0625rem 2.25rem 4.0625rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF  Bold">
          <li class="flex2 textC">基金会名称</li>
          <li class="flex3 textC">基金会地址</li>
          <li class="flex1 textC">基金会法人</li>
          <li class="flex3 textC">主管单位</li>
        </ul>
        <div style="height: 70vh;" class="superviseList font_s18">
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index">
            <li class="flex2">
              <p>{{ item.jjhmc }}</p>
            </li>
            <li class="flex3">{{ item.jjhdz }}</li>
            <li class="flex1">
              <p class="textC">{{ item.jjhfr }}</p>
            </li>
            <li class="flex3">{{ item.zgdw }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { jjhmc: '上海市浦东新区青少年发展基金会', jjhdz: '浦东大道2758号浦建大厦501室', jjhfr: '彭添智', zgdw: '共青团上海市浦东新区委员会' },
        { jjhmc: '上海浦东新区凝心聚力社区发展公益基金会', jjhdz: '乳山路206号申富大厦3楼323室', jjhfr: '杨莹', zgdw: '上海市浦东新区民政局' },
        { jjhmc: '上海浦东新区恩派公益基金会', jjhdz: '峨山路633号5幢C220', jjhfr: '刘永亮', zgdw: '上海市浦东新区民政局' },
        { jjhmc: '上海市浦东新区陆家嘴社区公益基金会', jjhdz: '栖霞路崂山五村555号309室', jjhfr: '齐劼人', zgdw: '上海市浦东新区人民政府陆家嘴街道办事处' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.Inventory2 {
  .Inv_ula {
    height: 3.75rem;
    font-size: 1.5625rem;
    font-weight: bold;
    background: url(../../assets/img/home/components/01.png) no-repeat;
    background-size: 100% 3.85rem;
    margin-left: -3px;
    margin-right: -3px;
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #3659f3, $alpha: 0.8);
  }
  .Inv_ulb {
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-top: none;
    overflow: hidden;
    li {
      padding: 1rem;
    }
  }

  .Inv_ulb li:nth-child(odd) {
    background: rgba(255, 255, 255, 0.13);
  }
}
</style>
